<template>
	<view>
		<view v-if="isLogin">
			<view class="login-container">
				<image class="login-avatar" :src="loginavatar" mode="aspectFill"></image>
				<view class="banner-container">
					<view class="header-container">
						<text class="nick-text">{{loginnick+"-【"+typename[type-1]+"】"}}</text>
						<image class="rich-img" mode="aspectFill" :src="badges[type]">
							<text class="iconfont icon-genshin_function_control_reduce del-img" @click="logout"></text>
					</view>
					<view class="email">{{loginemail}}</view>
				</view>
			</view>
			<view class="info-container">
				<view class="data-container" @click="clickSwitch(0)">
					<text class="tit-text">我点赞过的{{goodCount}}个博客</text>
					<text :class="isdata[0].visible?' iconfont icon-genshin_function_control_info info'
					:'iconfont icon-genshin_function_control_cancellation info'"></text>
				</view>
				<scroll-view v-if="isdata[0].visible" scroll-x="true" class="scroll-scroll"
					@scrolltolower="GetGoodBlogs" @click="GetGoodGoBlogs(goodBlogs.id)">
					<view class="scroll-item" v-for="(blog,index) in goodBlogs" :key="blog.id">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="info-container">
				<view class="data-container" @click="clickSwitch(1)">
					<text class="tit-text">我发布的{{goodCount}}个博客</text>
					<text :class="isdata[1].visible?' iconfont icon-genshin_function_control_info info'
					:'iconfont icon-genshin_function_control_cancellation info'"></text>
				</view>
				<scroll-view v-if="isdata[1].visible" scroll-x="true" class="scroll-scroll">
					<view class="scroll-item" v-for="(blog,index) in goodBlogs" :key="blog.id"
						@scrolltolower="goodBlogs.id">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="info-container">
				<view class="data-container" @click="clickSwitch(2)">
					<text class="tit-text">我管理的{{categories.length}}个类别数据</text>
					<text :class="isdata[2].visible?' iconfont icon-genshin_function_control_info info'
								:'iconfont icon-genshin_function_control_cancellation info'"></text>
				</view>
				<view v-if="isdata[2].visible" class="category-contariner">
					<view class="category-item" v-for="(c,index) in categories" :key="c.id">
						<text class="category-name" @click="clickUpdata(c.id,c.name)">{{c.name}}</text>
						<!-- <text class="c.count==0?'category-del':'category-num'" >{{c.count==0?'x':c.count}}</text> -->
						<text v-if="c.count==0" class="category-del" @click="clickDelete(c.id,c.name)">{{"x"}}</text>
						<text v-else class="category-num">{{c.count}}</text>
					</view>
					<view class="category-item">
						<text class="iconfont icon-genshin_function_control_selection ic-add" @click="clickAdd"></text>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<login-dailog ref="login" @after="afterLogin"></login-dailog>
		</view>
		<diablog-shell ref="shell_add" title="添加新类别" confirm-text="确认添加" @confirm="confirmAdd">
			<view style="margin: 10rpx;">
				<input type="text" placeholder="请输入新名称" focus style="padding-left: 15rpx;" @input="inputGet" />
			</view>
		</diablog-shell>
		<diablog-shell ref="shell_updata" title="更新类别名称" confirm-text="确认更新" @confirm="confirmupdata">
			<view style="margin: 10rpx;">
				<input type="text" :value="oldValue" placeholder="请输入新名称" focus style="padding-left: 15rpx;"
					@input="inputGet" />
			</view>
		</diablog-shell>
	</view>
</template>

<script>
	let current = 0
	let size = 2
	let app = getApp().globalData
	let goodIds = []
	let newName = ""
	let updataId = ""
	export default {
		data() {
			return {
				isLogin: false,
				isdata: [{
					visible: false
				}, {
					visible: false
				}, {
					visible: false
				}], //单独的数布尔值可直接在页面使用，但值数组无法渲染元素，数组元素必须为对象
				loginavatar: "",
				loginnick: "",
				loginuser: "",
				loginemail: "",
				typename: ["管理员", "认证博主", "博客会员"],
				badges: ["../../static/icons/badge0.png", "../../static/icons/badge1.png",
					"../../static/icons/badge2.png"
				],
				type: -1,
				goodCount: -1,
				goodBlogs: [],
				categories: [],
				oldValue: "",


			}
		},
		onLoad() {
			this.getLocalGood()

		},
		onShow() {
			if (!this.isLogin) {
				return
			}
			this.LocalData()
		},
		mounted() {
			if (!this.isLogin) {
				this.$refs.login.show()
			}
		},
		methods: {
			getLocalGood() {
				let ids = uni.getStorageSync(this.$par.key_good_ids)
				if (ids) {
					goodIds = ids
				}
				this.goodCount = goodIds.length
				if (this.goodCount < size) {
					size = this.goodCount
				}
			},
			GetGoodBlogs() {
				if (this.goodCount > 0 && this.goodBlogs.length == this.goodCount) {
					return
				}
				let url = this.$par.host + this.$par.action_top_blogs + goodIds[current++]
				this.$req.get(url, res => {
					let blog = res.data.data
					blog.picture = this.$par.host + blog.picture
					this.goodBlogs.push(blog)


				})
			},
			LocalData() {
				current = 0
				this.goodBlogs = []
				this.goodCount = -1
				this.getLocalGood()
				for (let i = 0; i < size; i++) {
					this.GetGoodBlogs()
				}
				this.getCategories()
			},
			getCategories() {
				let url = this.$par.host + this.$par.action_categories
				this.$req.get(url, res => {
					this.categories = []
					url = this.$par.host + this.$par.action_category_count
					res.data.data.forEach(async (c) => {
						//发送请求
						let r = await this.$req.requestAsync(url + c.id)
						if (r.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: r.data
							}
							this.categories.push(category)

						}
					})
				})
			},

			logout() {
				let url = this.$par.host + this.$par.action_logout
				let data = {
					token: app.token
				}
				this.$req.postQuery(url, data, res => {

					uni.showToast({
						title: res.data.message
					});
					if (res.data.success) {
						app.avatar = "/static/icons/default_user.png"
						app.nickname = ""
						app.username = ""
						app.type = -1
						app.token = ""
						app.email = ""
						app.uid = ""
						this.isLogin = false
						current = 0
						this.goodCount = -1
						this.goodBlogs = []
						this.categories = []
						//this.$refs.login.show()
						uni.navigateBack()

					}
				}, () => {
					console.log(this.isLogin);
				})
			},
			afterLogin() {
				this.isLogin = app.token.length > 0
				this.loginavatar = this.$par.host + app.avatar
				this.loginnick = app.nickname
				this.loginemail = app.email
				this.loginuser = app.username
				this.type = app.type
				console.log(this.loginavatar, this.loginnick, this.loginemail, this.type)
				this.LocalData()
			},
			clickAdd() {
				this.$refs.shell_add.show()
			},
			clickUpdata(id, name) {
				this.oldValue = name
				updataId = id
				newName = name
				this.$refs.shell_updata.show()
			},
			confirmupdata() {
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称'
					});
					return
				}
				let url = this.$par.host + this.$par.action_category_put + updataId
				let data = {
					token: app.token,
					name: newName
				}
				this.$req.requestAsync(url, data, "PUT").then(res => {
					console.log(res);
					if (!res.success) {
						uni.showToast({
							title: res.message
						});
						return
					}
					let item = res.data
					this.categories.forEach(c => {
						if (c.id == item.id) {
							c.name = item.name
						}
					})
					this.$forceUpdate()
					newName = ""
				}).catch(err => {
					newName = ""
					console.log(err);
				})

			},
			clickSwitch(index) {
				this.isdata[index].visible = !this.isdata[index].visible
			},
			confirmAdd() {
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称'
					});
					return
				}
				let url = this.$par.host + this.$par.action_category_add
				let data = {
					token: app.token,
					name: newName
				}
				this.$req.requestAsync(url, data, "POST").then(res => {
					console.log(res);
					if (!res.success) {
						uni.showToast({
							title: res.message
						});
						return
					}
					let item = {
						id: res.data.id,
						name: res.data.name,
						count: 0
					}
					this.categories.push(item)
					newName = ""
				}).catch(err => {
					newName = ""
					console.log(err);
				})
			},
			inputGet(e) {
				newName = e.detail.value
			},
			GetGoodGoBlogs(id) {
				uni.navigateTo({
					url: '../detail/detail?id+' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickDelete(id, name) {
				let url = this.$par.host + this.$par.action_category_del+ id
				let data = {
					token: app.token
				}
				uni.showModal({
					title: '确认',
					content: '确认要删除' + name + '吗',
					showCancel: true,
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res, confirm) {
							this.$req.del(url, data, res => {
								console.log(res);
								if(res.success){
									this.categories=this.categories.filter(c=>c.id!=id)
								}else{
									uni.showToast({
										title: res.message,
										icon:'none'
									});
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},

		}
	}
</script>

<style>
	@import url("profile.css");
</style>